/**
 * Popup Component Style for tingle
 * @author guanghong.wsj
 *
 * Copyright 2014-2016, Tingle Team.
 * All rights reserved.
 */

popupPrefixCls = t-popup


.{popupPrefixCls}-wrap
    position fixed
    top 0
    bottom 0
    right 0
    left 0
    z-index 1000
.{popupPrefixCls}
    position fixed
    display inline-block
    background-color white
    z-index 1010
.{popupPrefixCls}-wrap
    position fixed
    z-index 1001
.{popupPrefixCls}-slide-down
    top 0
    left 0
    width 100%
.{popupPrefixCls}-slide-up
    bottom 0
    left 0
    width 100%
.{popupPrefixCls}-slide-left
    top 0
    right 0
    bottom 0
.{popupPrefixCls}-slide-right
    top 0
    left 0
    bottom 0
.{popupPrefixCls}-mask 
    position fixed
    top 0
    right 0
    left 0
    bottom 0
    background-color rgba(0, 0, 0, 0.4)
    height 100%
    z-index 1000
.{popupPrefixCls}-hidden,
.{popupPrefixCls}-close
    display none


@keyframes popupSlideUpIn
    0%  
        transform translate(0, 100%)
    100%
        transform translate(0, 0)

@keyframes popupSlideUpOut
    0%
        transform translate(0, 0)
    100%
        transform translate(0, 100%)


.{popupPrefixCls}-slide-up-enter,
.{popupPrefixCls}-slide-up-appear
    transform translate(0, 100%)
    animation-duration 0.3s
    animation-timing-function ease-out
    animation-fill-mode both
.{popupPrefixCls}-slide-up-enter-active,
.{popupPrefixCls}-slide-up-appear-active
    animation-name popupSlideUpIn
.{popupPrefixCls}-slide-up-leave
    animation-duration 0.3s
    animation-timing-function ease-out;
    animation-fill-mode both
.{popupPrefixCls}-slide-up-leave-active
    animation-name popupSlideUpOut


@keyframes popupSlideDownIn
    0%
        transform translate(0, -100%)
    100%
        transform translate(0, 0)

@keyframes popupSlideDownOut
    0%
        transform translate(0, 0)
    100%
        transform translate(0, -100%)


.{popupPrefixCls}-slide-down-enter,
.{popupPrefixCls}-slide-down-appear
    transform translate(0, -100%)
    animation-duration 0.3s
    animation-timing-function ease-out
    animation-fill-mode both
.{popupPrefixCls}-slide-down-enter-active,
.{popupPrefixCls}-slide-down-appear-active
    animation-name popupSlideDownIn
.{popupPrefixCls}-slide-down-leave
    animation-duration 0.3s
    animation-timing-function ease-out;
    animation-fill-mode both
.{popupPrefixCls}-slide-down-leave-active
    animation-name popupSlideDownOut

@keyframes popupSlideLeftIn
    0%
        transform translate(100%, 0)
    100%
        transform translate(0, 0)

@keyframes popupSlideLeftOut
    0%
        transform translate(0, 0)
    100%
        transform translate(100%, 0)


.{popupPrefixCls}-slide-left-enter,
.{popupPrefixCls}-slide-left-appear
    transform translate(100%, 0)
    animation-duration 0.3s
    animation-timing-function ease-out
    animation-fill-mode both
.{popupPrefixCls}-slide-left-enter-active,
.{popupPrefixCls}-slide-left-appear-active
    animation-name popupSlideLeftIn
.{popupPrefixCls}-slide-left-leave
    animation-duration 0.3s
    animation-timing-function ease-out;
    animation-fill-mode both
.{popupPrefixCls}-slide-left-leave-active
    animation-name popupSlideLeftOut


@keyframes popupSlideRightIn
    0%
        transform translate(-100%, 0)
    100%
        transform translate(0, 0)

@keyframes popupSlideRightOut
    0%
        transform translate(0, 0)
    100%
        transform translate(-100%, 0)


.{popupPrefixCls}-slide-right-enter,
.{popupPrefixCls}-slide-right-appear
    transform translate(-100%, 0)
    animation-duration 0.3s
    animation-timing-function $transition-ease
    animation-fill-mode both
.{popupPrefixCls}-slide-right-enter-active,
.{popupPrefixCls}-slide-right-appear-active
    animation-name popupSlideRightIn
.{popupPrefixCls}-slide-right-leave
    animation-duration 0.3s
    animation-timing-function $transition-ease;
    animation-fill-mode both
.{popupPrefixCls}-slide-right-leave-active
    animation-name popupSlideRightOut